<template>
<div class="container">
    <div class="header">
        <NavBar :title="mode == 1 ? '新增地址' : '编辑地址'" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <div class="ipt-box">
            <div class="title">姓名</div>
            <input class="ipt" type="text" placeholder="请填写收货人姓名" v-model='name'>
        </div>
        <div class="ipt-box">
            <div class="title">联系电话</div>
             <input class="ipt" type="tel" placeholder="请输入联系电话" v-model='phone'>
        </div>
        <div class="ipt-box">
            <div class="title">收货地址</div>
            <input class="ipt" type="text" placeholder="请输入收货地址" v-model='address'>
        </div>
        <div class="ipt-box" >
            <div class="title">邮政编码</div>
            <input class="ipt" type="text" placeholder="请选择邮政编码" v-model='youbian' >
            <div class="chosebox" >
                <div class="item flex align-items space-between ell1" v-for='(item,idx) in searchCodes' :key='idx' @click='codeConfirm(item.code)'>
                    <span>{{ item.text }}</span>
                    <i class="iconfont iconarrow-right"></i>
                </div>
            </div>
        </div>
        <div class="ipt-box flex align-items space-between" style="padding-top:0">
            <div class="title flex1">设置默认地址</div>
            <Switchtab v-model="checked" size='18px' />
        </div>
        <div class="btns">
            <Button type='info' block @click='submit'>保存</Button>
        </div>
        <Popup v-model="showPicker" round position="bottom">
           <Picker ref='areapicker' show-toolbar title="标题" :columns="columns" @confirm="areaConfirm" @cancel='showPicker = false' />
        </Popup>
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    Switch,
    Button,
    Dialog,
    Picker,
    Popup,
} from "vant";
import {
    addressAdd,
    addressEdit,
    addressOne,
    getAreaList,
    searchAreaCode,
} from '@/model/api'
export default {
    components: {
        NavBar,
        Icon,
        Switchtab: Switch,
        Button,
        Picker,
        Popup
    },
    data() {
        return {
            checked: false,
            mode: 1, //1添加收货地址  2编辑收货地址
            id: "",
            name: "",
            phone: "",
            address: "",
            youbian:"",
            areaCode:[],
            areaIdx:[],
            showPicker:false,
            columns: [],
            searchCodes:[],
        };
    },
    async created() {
        let { mode , id = ""} = this.$route.query;
        this.mode = mode;
        this.id = id;
        if (mode == 2) {
            this.getList(async () => {
                let {code , data } = await addressOne({ id  });
                if(code == 1){
                    this.name = data.name;
                    this.phone = data.mobile;
                    this.address = data.address;
                    this.youbian = data.postal_code;
                    this.checked = Boolean(data.is_def)
                }
            })
        }else{
          this.getList();
        }
    },
    watch:{
        youbian(newVal,oldVal){
            console.log(newVal)
           clearTimeout(this.timp);
           setTimeout(async() => {
              let data = await searchAreaCode({code:newVal},false);
              this.searchCodes = data;
           },300)
        
        }
    },
    methods: {
        areaConfirm(target,idx){
           this.showPicker = false;
           this.areaCode = target;
           this.areaIdx = idx;
           var areaString = this.columns[this.areaIdx[0]].children[this.areaIdx[1]].code;
           this.youbian = areaString;
        },
        codeConfirm(text){
            this.youbian = text;
        },
        async getList(callback){
            let areaList = await getAreaList();
            this.columns = areaList;
            callback && callback.apply(this);
        },
        async submit() {
            if (!this.name) {
                this.$toast({
                    type: "fail",
                    message: "请填写收货人姓名"
                })
                return false
            }
            if (!this.phone) {
                this.$toast({
                    type: "fail",
                    message: "请输入联系电话"
                })
                return false
            }
            if (!this.address) {
                this.$toast({
                    type: "fail",
                    message: "请输入收货地址"
                })
                return false
            }
            if (!this.youbian) {
                this.$toast({
                    type: "fail",
                    message: "请输入邮政编码"
                })
                return false
            }
            if(this.mode == 1){
              let {
                  code,
                  msg
              } = await addressAdd({
                  name: this.name,
                  mobile: this.phone,
                  address: this.address,
                  postal_code: this.youbian,
                  is_def: this.checked,
              })
              if (code == 1) {
                  Dialog.alert({
                      title: "提示",
                      message: msg,
                  }).then(() => {
                      this.$router.go(-1)
                  }).catch()
              } else {
                  this.$toast({
                      type: "fail",
                      message: msg,
                  })
              }
            }else{
                let { code , msg } = await addressEdit({
                    id:this.id,
                    name: this.name,
                    mobile: this.phone,
                    address: this.address,
                    postal_code: this.youbian,
                    is_def: this.checked,
                })
                if(code == 1){
                  Dialog.alert({
                      title: "提示",
                      message: msg,
                  }).then(() => {
                      this.$router.go(-1)
                  }).catch()
                }else{
                  this.$toast({
                      type: "fail",
                      message: msg,
                  })
                }
            }
        }
    }

};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;

}
.chosebox{
    width: 100%;
    min-height: 0;
    max-height:205px;
    transition: .3s;
    background: #F7F7F7;
    padding: 0 10px;
    .item{
        width: 100%;
        padding: 10px 0;
        font-size: 14px;
        color: #333;
        border-top: 1px solid #fff;
        .iconfont{
            color:#ccc;
        }
    }
}
.ipt-box {
    width: 100%;
    height: auto;
    padding: 15px 14px 20px;
    overflow: hidden;
    .title {
        width: 100%;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        overflow: hidden;
    }

    .ippt-value {
        width: 347px;
        height: 36px;
        background: #F7F7F7;
        border-radius: 5px;
        margin-top: 10px;
        padding: 9px;
        overflow: hidden;
        span {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333;
        }

        span.default {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #CCCCCC;
        }
    }

    .ipt {
        width: 347px;
        padding: 12px 9px;
        margin-top: 5px;
        background: #F7F7F7;
        border-radius: 5px;
        overflow: hidden;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333;
    }

    .ipt::placeholder {
        width: 347px;
        padding: 12px 9px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCCCCC;
    }
    .placeholderFontsize::-webkit-input-placeholder{
        font-size:0.3rem !important;
        line-height: 0.4rem;
    }
}
.btns {
    width: 100%;
    padding: 50px 14px;
}
</style>
